  <template>
  <div class="page">
    <div class="total">
      <img class="total_bg" src="../../../static/images/rbg.png" mode="widthFix">
      <div class="total_con">
        <div class="weui-flex total_item">
          <img src="../../../static/images/ic_rye.png" mode="widthFix">
          <div class="weui-flex__item">账户余额：¥{{appletGetInfo.balance}}</div>
        </div>
        <div class="weui-flex total_item">
          <img src="../../../static/images/ic_cz.png" mode="widthFix">
          <div class="weui-flex__item">个人积分：{{appletGetInfo.points}}</div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card_title"><span>快捷充值</span></div>
      <div class="card_con recharge">
        <a v-for="(item,index) in payMoney" :key="index" @click="pay(item.money,1,index)" v-if="index<7" class="recharge_item" :class="{selected:item.isChecked}">
          <div>{{item.money}}</div>
          <p></p>
        </a>
        <a   @click="pay('',0,7)"  class="recharge_item"  :class="{selected:payMoney[7].isChecked}">
          <div>{{payMoney[7].money}}</div>
          <p></p>
        </a>
<!--        <a  class="recharge_item" @click="pay(200,1)" :class="{selected:isChecked||isMoney2}">-->
<!--          <div>200元</div>-->
<!--          <p></p>-->
<!--        </a>-->
<!--        <a  class="recharge_item" @click="pay(500,1)">-->
<!--          <div>500元</div>-->
<!--          <p></p>-->
<!--        </a>-->
<!--        <a  class="recharge_item" @click="pay(1000,1)" >-->
<!--          <div>1000元</div>-->
<!--          <p></p>-->
<!--        </a>-->
<!--        <a  class="recharge_item" @click="pay(2000,1)" >-->
<!--          <div>2000元</div>-->
<!--          <p></p>-->
<!--        </a>-->
<!--        <a class="recharge_item" @click="pay(3000,1)" >-->
<!--          <div>3000元</div>-->
<!--          <p></p>-->
<!--        </a>-->
<!--        <a  class="recharge_item" @click="pay(5000,1)" >-->
<!--          <div>5000元</div>-->
<!--          <p></p>-->
<!--        </a>-->
<!--        <div class="recharge_item" @click="pay('',0)">-->
<!--          <div>自定义充值</div>-->
<!--&lt;!&ndash;          <p>按需充值</p>&ndash;&gt;-->
<!--        </div>-->
      </div>
    </div>
    <div class="card">
      <div class="card_title"><span>充值活动</span></div>
      <div class="card_con recharge_info">
        <p><span>活动时间：</span> {{list?list.createTime:""}}</p>
        <p><span>适用条件：</span>{{list?list.receivingConditionName:''}}</p>
        <p><span>活动渠道：</span>{{list?list.scenceName:""}}</p>
      </div>
    </div>
    <div v-if="popup">
      <div class="weui-mask" @click="popup=false;money='';isInput=0"></div>
      <div class="weui-dialog">
        <div class="weui-dialog__hd">快捷充值</div>
        <div class="weui-dialog__bd weui-flex rinput" style="flex-wrap: nowrap;">
          <div>充值金额</div>
          <div class="weui-flex__item">
            <input type="text" placeholder="金额" v-model="money" style="text-align: left;" v-if="!isInput" >
            <span v-else>{{money}}</span>
            <span>元</span>
            </div>
        </div>
        <div class="weui-dialog__ft">
            <a href="/pages/pay/main" @click="recharge()" class="weui-dialog__btn weui-dialog__btn_primary">下一步</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as appId from "@/utils/util"
  import {toDecimal2} from "@/utils/util"
  import {scence} from "@/utils/options"
    import {receiving} from "@/utils/options"
  import {getTIme} from "@/utils/util"
export default {
  data () {
    return {
      popup: false,
      phone:"",
      isInput:0,
      pageNo:1,
      pageSize:10,
        payMoney:[{
          money:100,
            isChecked: false
        },{
            money:200,
            isChecked: false
        },{
            money:500,
            isChecked: false
        },{
            money:1000,
            isChecked: false
        },{
            money:2000,
            isChecked: false
        },{
            money:3000,
            isChecked: false
        },{
            money:5000,
            isChecked: false
        },{
            money:"自定义充值",
            isChecked: false
        }],
      appletGetInfo:{
        balance:0,
        points:0
      },
      money:"",
      list:{}

    }
  },
  onShow(){
    wx.setNavigationBarTitle({
      title: "账号储值"
    })
     this.userInfo =wx.getStorageSync('userInfo')&&JSON.parse(wx.getStorageSync('userInfo'))
     if(this.userInfo){
       this.phone=this.userInfo.mobileNo;
       this.getAppletGetInfo()
       this.getList()
     }else{
        wx.showToast({
                      title:'请先登录',
                      icon: 'none',
                      duration: 2000
                    })
     }
  },
  methods: {
    toDecimal2,
    getTIme,
    getList(){
       this.$http.request({
           method:"post",
           url:"/v1.0/appletHome/appletRechargeActivity",
           body:{
                "appid":appId.appId,
                 "phone":this.phone,
                 "pageNo":this.pageNo,
                 "pageSize":this.pageSize
           }
       }).then((data)=>{
         if(data.code==0){
           this.list=data.result||{};
		   if(this.list.useScenes){
			  this.list.scenceName=scence.filter((item)=>{
			  			  return item.value==this.list.useScenes
			  })[0].label;
		   }
		   this.list.createTime=this.getTIme(this.list.createTime)
		   if(this.list.receivingCondition){
			   this.list.receivingConditionName=receiving.filter((item)=>{
				   return item.value==this.list.receivingCondition
			   })[0].label;
		   }

         }
       })
    },
    recharge(){
      let obj={
        amount:0.01
      }
      this.popup=false;
      console.log(this.popup)
        wx.setStorageSync('payParams',JSON.stringify(obj))
          wx.setStorageSync('isTuangou',2)
       let url=`/pages/pay/main`
       wx.navigateTo({ url })


    },

    getMoney(val){
      console.log(val)
    },
    pay(num,a,index){
        this.payMoney.forEach((a,i)=>{
            a.isChecked=false;
            if(i==index){
                a.isChecked=true;
            }
        })
      this.popup=true;
      this.money=num;
      this.isInput=a
    },
    getAppletGetInfo(){
       this.$http.request({
          method:"post",
          url:"/v1.0/appletLogin/appletGetInfo",
          body:{
                phone:this.phone,
                appid:appId.appId
          }
      }).then((data)=>{
        if(data.code==0){
           this.appletGetInfo=data.result;
           this.appletGetInfo.balance=this.toDecimal2(data.result.balance)
        }
      })
    }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
  .weui-flex__item{
    display: flex;
    justify-content: space-around;
  }
.total{
  position: relative;
  margin: 0.8em;
}
.total_con{
  position: absolute;
  top: 0.5em;
  left: 0px;
  right: 0px;
}
.total_bg{
  width: 100%;
}
.total_item{
  margin: 0.8em 0.8em 0em 2em;
  color: #fff;
}
.total_item img{
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.4em;
}
.card{
  margin: 0.8em;
  background: #fff;
  border-radius: 0.3em;
  box-shadow: 0px 0px 8px #eee;
}
.card_title{
  height: 2.4em;
  line-height: 2.4em;
  border-bottom: 1px #eee solid;
}
.card_title span{
  font-size: 0.9em;
  padding-left: 0.5em;
}
.card_con{
  padding: 0.8em;
  font-size: 0.8em;
  overflow: hidden;
}
.recharge_item{
  width: 28%;
  display: block;
  float: left;
  margin:0 2%;
  border: 1px #1AAD19 solid;
  border-radius: 0.3em;
  padding: 0.3em 0;
  text-align: center;
  margin-bottom: 0.5em;
}
.selected{
  border: 1px #FF787E solid;
  color: #FF787E;
}
.recharge_item div{
  color: #1AAD19;
}
.selected div{
  color: #FF787E;
}
.recharge_item p{
  color: #999;
  font-size: 0.8em;
}
.recharge_info span{
  color: #999;
}
.rinput{
  line-height: 1.6em;
}
.rinput input{
  border: 1px #d8d8d8 solid;
  border-radius: 0.3em;
  background: #f6f6f6;
  height: 1.4em;
  width: 10em;
  margin-left: 0.4em;
}
.weui-dialog__btn_primary{
  color: #FF787E!important;
}
</style>
